


/* common */
.flex {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }
  /* 宽度随屏幕改变变化 */
  .flex-1 {
    flex: 1;
    -webkit-flex: 1;
  }
  /* flex 布局下，css 设置文本不换行时，省略号不显示的解决办法 ，父容器设置*/
  .flex-ell{
    width: 0;
  }
  .flex-direction-row{
    flex-direction: row;
    -webkit-flex-direction: row; 
  }
  .flex-direction-column{
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .flex-center-align{
    align-items: center;
    -webkit-align-items: center;
  }
  /* 垂直 水平 居中 */
  .flex-center {
    /* justify-content: center;
    -webkit-justify-content: center; */
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
  }
  .flex-center-center{
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
  }
  .flex-center-end{
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }
  .flex-column-end{
    flex-direction: column;
    -webkit-flex-direction: column;
    /* align-items: center;
    -webkit-align-items: center; */
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }
  .flex-center-start{
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
  }
  .flex-end{
    align-items: end;
    -webkit-align-items: end;
  }
  .align-self{
    align-self: center;
    -webkit-align-self:center;
  }
  /* 垂直 居中 */
  .flex-ver {
    align-items: center;
    -webkit-align-items: center;
  }
  /* 换行 */
  .flex-wrap{
    flex-wrap: wrap;
    -moz-flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
  }
  /* 不换行 */
  .flex-nowrap{
    flex-wrap:nowrap;
    -moz-flex-wrap:nowrap;
    -webkit-flex-wrap: nowrap;
  }
  .flex-end{
    align-items: flex-end;
    -webkit-align-items: flex-end;
  }
  .flex-start{
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
  }
  .flex-end{
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }
  /* flex 容器（设置为flex）内子元素向两边顶齐平分 */
  .flex-jcsb {
    justify-content: space-between;
    -webkit-justify-content: space-between;
  }
  .align-self{
    align-self: center;
    -webkit-align-self:center;
  }
  .flex-around{
    justify-content: space-around;
    -webkit-justify-content: space-around;
  }
  /* flex .flex-direction-row .flex-wrap */
  .flex-derc-warp{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;   
    flex-direction: row;
    -webkit-flex-direction: row; 
    flex-wrap: wrap;
    -moz-flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
  }
  .flex-derc-nowarp{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;   
    flex-direction: row;
    -webkit-flex-direction: row; 
    flex-wrap:nowrap;
    -moz-flex-wrap:nowrap;
    -webkit-flex-wrap: nowrap;
  }
